<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    /* 用animation调用帧动画 
    animation-name 轨迹名称 @keyframes ***
    animation-duration 时长
    animation-timing-function 属性 liner ease ease-in ease-out ease-in-out
    animation-delay 延迟
    animation-iteration-count 次数 infinite无数次
    animation-direction 方向 normal reverse alternate alternate-reverse
    animation-play-state 状态 running paused
    animation-fill-mode 结束后 none forwards停留最后一帧 backwards both
    */
    #div1{
      width:100px;height:100px;
      background: -webkit-radial-gradient(circle,orange,green);
      background: radial-gradient(circle,orange,green);
      border-radius: 50%;
      /*            名称 时间 属性 延迟 次数    方向    结束后*/
      /* animation: move 1s ease 0s infinite normal none; 无数次*/
      /* animation: move 1s ease 0s   1     reverse none; 1次倒着*/
      /* animation: move 1s ease 0s   2     alternate none;  2次第二次原路返回 */
      animation: move 1s ease 0s   2     normal  forwards; /* 停留在最后一帧 */
    }
    #div1:hover{
      animation-play-state: paused;/*划入停止*/
    }
    /*名称要对应*/
    /* 关键帧动画 需要加@-webkit-keyframes move{}*/
    @keyframes move{
      0%{
        transform:translate(200px,200px);
      }
      50%{
        transform:translate(400px,400px);
      }
      100%{
        transform:translate(400px,0);
      }
    }
    

  </style>
</head>
<body>
  <div id="div1"></div>
</body>
</html>